<template>
  <view class="content" :style="{ paddingBottom: '50px' }">
    <tabBar :top="H_content" numBer="5"></tabBar>
    <view class="avact">
      <view class="touxiang"><image :src="userFo.avatar" style="width: 148rpx;height: 148rpx;border-radius: 74rpx;" mode=""></image></view>
      <view class="name">
        <view class="name_top">
          <view class="username">{{ userFo.nickname }}</view>
          <view class="tourist">{{ userFo.group.name }}</view>
        </view>
        <view class="no1">NO.{{ userFo.mobile || random }}</view>
      </view>
    </view>
    <!-- 会员 -->
    <view class="" v-if="userFo.group_id == 1" style="background: linear-gradient(to bottom, #ffffff, #e9edef);width: 100%;">
      <view class="vip">
        <view class="kaiVip" @click="huanact">
          <image src="/static/lzl/right@2x.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
          <view class="time">点击加入会员</view>
        </view>
        <view class="name">普通游客 NO.{{ random }}</view>
      </view>
    </view>
    <!-- 初级会员----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->
    <view class="" v-else-if="userFo.group_id == 2" style="background: linear-gradient(to bottom, #ffffff, #e9edef);width: 100%;">
      <view class="vips">
        <image
          src="/static/lzl/user_vip_bg@2x.png"
          style="border-radius: 20rpx 20rpx 0 0; width: 686rpx; height: 192rpx;position: absolute;top: 0;left: 0;z-index: 1;"
          mode=""
        ></image>
        <view class="" style="z-index: 2;position: absolute;width: 100%;padding: 20rpx;top: 0;left: 0;">
          <view class="" style="margin-top: 20rpx;font-size: 32rpx;color: #322922;font-weight: bold;">VIP会员 NO.{{ userFo.mobile }}</view>
          <view class=""><u-line-progress active-color="#88b1c2" height="10" :show-percent="false" :percent="30"></u-line-progress></view>
          <view class="" style="display: flex;justify-content: space-between;margin-top: 20rpx;">
            <view class="" style="font-size: 24rpx;color: #47484D;">LV1VIP{{ userFo.group.money }}元</view>
            <view class="" style="font-size: 24rpx;color: #47484D;">再消费{{ userFo.gap }}元可提升为银卡会员</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 第二季会员----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->
    <view class="" v-else-if="userFo.group_id == 3" style="background: linear-gradient(to bottom, #ffffff, #e9edef);width: 100%;">
      <view class="vips">
        <image src="/static/lzl/user_2@2x.png" style="border-radius: 20rpx 20rpx 0 0; width: 686rpx; height: 192rpx;position: absolute;top: 0;left: 0;z-index: 1;" mode=""></image>
        <view class="" style="z-index: 2;position: absolute;width: 100%;padding: 20rpx;top: 0;left: 0;">
          <view class="" style="margin-top: 20rpx;font-size: 32rpx;color: #322922;font-weight: bold;">银卡会员 NO.{{ userFo.mobile }}</view>
          <view class=""><u-line-progress active-color="#88b1c2" height="10" :show-percent="false" :percent="30"></u-line-progress></view>
          <view class="" style="display: flex;justify-content: space-between;margin-top: 20rpx;">
            <view class="" style="font-size: 24rpx;color: #47484D;">LV2VIP{{ userFo.group.money }}元</view>
            <view class="" style="font-size: 24rpx;color: #47484D;">再消费{{ userFo.gap }}元可提升为金卡会员</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 第三季会员 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->
    <view class="" v-else-if="userFo.group_id == 4" style="background: linear-gradient(to bottom, #ffffff, #e9edef);width: 100%;">
      <view class="vips">
        <image src="/static/lzl/user_3@2x.png" style="border-radius: 20rpx 20rpx 0 0; width: 686rpx; height: 192rpx;position: absolute;top: 0;left: 0;z-index: 1;" mode=""></image>
        <view class="" style="z-index: 2;position: absolute;width: 100%;padding: 20rpx;top: 0;left: 0;">
          <view class="" style="margin-top: 20rpx;font-size: 32rpx;color: #322922;font-weight: bold;">金卡会员 NO.{{ userFo.mobile }}</view>
          <view class=""><u-line-progress active-color="#88b1c2" height="10" :show-percent="false" :percent="num"></u-line-progress></view>
          <view class="" style="display: flex;justify-content: space-between;margin-top: 20rpx;">
            <view class="" style="font-size: 24rpx;color: #47484D;">LV3VIP{{ userFo.group.money }}元</view>
            <view class="" style="font-size: 24rpx;color: #47484D;">再消费{{ userFo.gap }}元可提升为铂金会员</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 第四季会员userFo.group_id == 2----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->
    <view class="" v-else-if="userFo.group_id == 5" style="background: linear-gradient(to bottom, #ffffff, #e9edef);width: 100%;">
      <view class="vips">
        <image src="/static/lzl/user_4@2x.png" style="border-radius: 20rpx 20rpx 0 0; width: 686rpx; height: 192rpx;position: absolute;top: 0;left: 0;z-index: 1;" mode=""></image>
        <view class="" style="z-index: 2;position: absolute;width: 100%;padding: 20rpx;top: 0;left: 0;">
          <view class="" style="margin-top: 20rpx;font-size: 32rpx;color: #322922;font-weight: bold;">铂金会员 NO.{{ userFo.mobile }}</view>
          <!-- <view class=""><u-line-progress active-color="#88b1c2" height="10" :show-percent="false" :percent="30"></u-line-progress></view> -->
          <view class="" style="display: flex;justify-content: space-between;margin-top: 60rpx;">尊贵的铂金会员，你可以享受最高优惠</view>
        </view>
      </view>
    </view>
    <!-- 下方的 -->
    <view class="box" style="width: 100%;background-color: #fff;margin-bottom: 20rpx;">
      <view class="box1">
        <view @click="order" style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 20rpx;">
          <view class="">我的订单</view>
          <view class=""><image src="/static/lzl/rightD@2x.png" style="width: 48rpx;height: 48rpx;" mode=""></image></view>
        </view>
        <view @click="vips" style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 20rpx;">
          <view class="">会员专享</view>
          <view class=""><image src="/static/lzl/rightD@2x.png" style="width: 48rpx;height: 48rpx;" mode=""></image></view>
        </view>
        <view @click="textV(1)" style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 20rpx;">
          <view class="">会员规则</view>
          <view class=""><image src="/static/lzl/rightD@2x.png" style="width: 48rpx;height: 48rpx;" mode=""></image></view>
        </view>
      </view>
    </view>
    <view class="box" style="width: 100%;background-color: #fff;margin-bottom: 20rpx;">
      <view class="box1">
        <view @click="textV(6)" style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 30rpx;">
          <view class="">关于亚麻</view>
          <view class=""><image src="/static/lzl/rightD@2x.png" style="width: 48rpx;height: 48rpx;" mode=""></image></view>
        </view>
        <view @click="textV(7)" style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 30rpx;">
          <view class="">关于品牌</view>
          <view class=""><image src="/static/lzl/rightD@2x.png" style="width: 48rpx;height: 48rpx;" mode=""></image></view>
        </view>
        <view @click="textV(2)" style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 30rpx;">
          <view class="">售后条款</view>
          <view class=""><image src="/static/lzl/rightD@2x.png" style="width: 48rpx;height: 48rpx;" mode=""></image></view>
        </view>
        <view @click="textV(3)" style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 30rpx;">
          <view class="">尺码指南</view>
          <view class=""><image src="/static/lzl/rightD@2x.png" style="width: 48rpx;height: 48rpx;" mode=""></image></view>
        </view>
        <view @click="textV(4)" style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 30rpx;">
          <view class="">产品养护</view>
          <view class=""><image src="/static/lzl/rightD@2x.png" style="width: 48rpx;height: 48rpx;" mode=""></image></view>
        </view>
        <view @click="textV(5)" style="display: flex;justify-content: space-between;align-items: center;">
          <view class="">配送包装</view>
          <view class=""><image src="/static/lzl/rightD@2x.png" style="width: 48rpx;height: 48rpx;" mode=""></image></view>
        </view>
      </view>
    </view>
    <view class="box" style="width: 100%;background-color: #fff;">
      <view class="box1">
        <view @click="addess" style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 30rpx;">
          <view class="">地址管理</view>
          <view class=""><image src="/static/lzl/rightD@2x.png" style="width: 48rpx;height: 48rpx;" mode=""></image></view>
        </view>

        <button
          :plain="true"
          open-type="contact"
          style="color: #5C5A55;font-size: 32rpx;padding: 0; border: none; display: flex;justify-content: space-between;align-items: center;margin-bottom: 30rpx;"
        >
          <view class="">联系客服</view>
          <view class=""><image src="/static/lzl/rightD@2x.png" style=" width: 48rpx;height: 48rpx;" mode=""></image></view>
        </button>

        <view @click="textV(10)" style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 30rpx;">
          <view class="">隐私政策</view>
          <view class=""><image src="/static/lzl/rightD@2x.png" style="width: 48rpx;height: 48rpx;" mode=""></image></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { user } from '@/api/api.js';
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['H_top', 'H_height', 'H_content'])
  },
  onShow() {},
  data() {
    return {
      random: this.$u.random(1, 5),
      userFo: {}
    };
  },
  onShow() {
    this.init();
  },
  onLoad() {},
  computed: {
    num() {
      let nu = (this.userFo.consumption / (this.userFo.gap + this.userFo.consumption)) * 100;
      return nu;
    }
  },
  methods: {
    // 点击会员专享
    vips() {
      uni.navigateTo({
        url: '/pages/my/vips/vips'
      });
    },
    async init() {
      let res = await user();
      this.userFo = res.data;
      this.userFo.gap = res.data.gap.toFixed(2);
    },
    // 点击头像进个人信息
    huanact() {
      uni.navigateTo({
        url: '/pages/my/userinfo/userinfo'
      });
    },
    addess() {
      uni.navigateTo({
        url: '/pages/address/address'
      });
    },
    // 跳转到订单模块
    order() {
      uni.navigateTo({
        url: '/pages/my/orderList/orderList'
      });
    },
    // 点击跳转
    textV(data) {
      if (data == 1) {
        uni.navigateTo({
          url: '/pages/my/textValue/rule/rule'
        });
      } else if (data == 2) {
        uni.navigateTo({
          url: '/pages/my/textValue/after/after'
        });
      } else if (data == 3) {
        uni.navigateTo({
          url: '/pages/my/textValue/size/size'
        });
      } else if (data == 4) {
        uni.navigateTo({
          url: '/pages/my/textValue/conserve/conserve'
        });
      } else if (data == 5) {
        uni.navigateTo({
          url: '/pages/my/textValue/delivery/delivery'
        });
      } else if (data == 6) {
        uni.navigateTo({
          url: '/pages/my/textValue/guanYaMa/guanYaMa'
        });
      } else if (data == 7) {
        uni.navigateTo({
          url: '/pages/my/textValue/guanPin/guanPin'
        });
      } else if (data == 10) {
        uni.navigateTo({
          url: '/pages/my/yinsi/yinsi'
        });
      }
    }
  }
};
</script>

<style lang="scss">
.box {
  margin-top: 40rpx;

  .box1 {
    padding: 20rpx;
    width: 686rpx;
    background-color: #fff;
    margin: 0 auto;
    box-shadow: 0px 5rpx 10rpx #f6f6f6;
    font-size: 32rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    // font-weight: bold;
    color: #5c5a55;
  }
}
.vips {
  position: relative;
  // z-index: 888;
  padding: 20rpx;
  width: 686rpx;
  height: 192rpx;
  margin: 0 auto;
  border-radius: 20rpx 20rpx 0 0;
  // background-color: #1f7194;
  // background-size: 100% 100%;
}
.vip {
  padding: 20rpx;
  width: 686rpx;
  height: 192rpx;
  border-radius: 20rpx 20rpx 0 0;
  background-color: #1f7194;
  // text-align: right;
  margin: 0 auto;
  .kaiVip {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    .time {
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #88b1c2;
    }
  }
  .name {
    font-size: 32rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    margin-top: 20rpx;
    color: #ffffff;
  }
}
.avact {
  display: flex;
  // align-items: center;
  width: 686rpx;
  height: 148rpx;
  // background-color: pink;
  margin: 0 auto;
  margin-top: 44rpx;
  margin-bottom: 68rpx;
  .name {
    margin-left: 28rpx;
    .name_top {
      display: flex;
      .username {
        margin-top: 5rpx;
        margin-bottom: 20rpx;
        font-size: 48rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #0a0a09;
      }
      .tourist {
        width: 144rpx;
        height: 56rpx;
        margin-top: 10rpx;
        margin-left: 15rpx;
        line-height: 56rpx;
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #adadaa;
        text-align: center;
        opacity: 1;
        border: 2rpx solid #adadaa;
      }
    }
    .no1 {
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #adadaa;
    }
  }
}
.title-area {
  width: 100%;
  background-color: #fff;
  color: #000;
  position: fixed;
  top: 0;
  left: 0;
}
.nav-bar-title {
  display: flex;
  // justify-content: ;
  align-items: center;
}
.tit {
  font-size: 32rpx;
  font-family: 'DingTalk JinBuTi-Regular, DingTalk JinBuTi';
  font-weight: 400;
  color: #322922;
}
</style>
